{include file="start" /}
{include file="end" /}
<title>重卡汇</title>
<link rel="stylesheet" href="/_hongyanche/css/app.css">
<style>
    .detail-wrap {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .detail-wrap .btns {
        position: absolute;
        top: 100px;
        z-index: 999;
    }

    .detail-wrap .btns button {
        display: block;
        background-color: rgba(245, 241, 200, 0.5);
    }

    .detail-wrap .header {
        padding: 5px;
        text-align: center;
        font-size: 1.3rem;
        font-weight: 600;
        background: cadetblue;
        color: #fff;
    }

    .detail-wrap .map-wrap {
        height: 100%;
    }
    .des {
        position: absolute;
        bottom: 0;
        background: #fff;
        width: 100%;
        padding: 8px;
        color: #333;
        font-size: 14px;
    }
</style>
<div class="detail-wrap">
    <div class="header">
        <span style="float:left" id="back"><</span> 轨迹回放
    </div>
    <div class="data-wrap weui-cell" style="padding:0;">
        <div class="start weui-cell__hd" style="font-size:12px;">开始:</div>
        <input id="starttime" type="text-local" onclick="WdatePicker( {el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'} )" name="starttime" value="" class=" weui-cell__hd" />
        <div class="end weui-cell__hd" style="font-size:12px;">结束:</div>
        <input id="endtime" type="text" onclick="WdatePicker( {el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'} )" name="endtime" value="" class=" weui-cell__hd">
        <a href="javascript:void(0)" id="submit" class="">查询</a>
    </div>
    <div class="btns">
        <button id="run" class=" weui-btn weui-btn_plain-primary weui-btn_mini">开始</button>
        <button id="pause" class="weui-btn weui-btn_plain-primary weui-btn_mini">暂停</button>
        <button id="stop" class="weui-btn weui-btn_plain-primary weui-btn_mini">停止</button>
    </div>
    <div class="map-wrap" id="Bmap"></div>
    <div class="des">今日统计：行驶<span id="mileage"></span>km;油耗<span id="fuelConsumption"></span>L;平均<span id="lp100km"></span>L/百公里</div>
</div>
<script>
    function objLength(obj) {
        var count = 0;
        for (var i in obj) {
            count++;
        }
        return count;
    }
    function getVin(name) {
        var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
        if (result == null || result.length < 1) {
            return "";
        }
        return decodeURI(result[1]);
    }
    var backBtn = document.getElementById('back');
    backBtn.addEventListener('click', function () {
        window.history.back();
    });
    function map(lng, lat) {
        var map = new BMap.Map("Bmap");
        var point = new BMap.Point(lng, lat);
        map.centerAndZoom(point, 16);
        map.enableScrollWheelZoom();
        var myIcon = new BMap.Icon("/_hongyanche/material/biaozhu.png", new BMap.Size(30, 30), {
            anchor: new BMap.Size(10, 10)
        });
        var marker = new BMap.Marker(point, { icon: myIcon });
        map.addOverlay(marker);
    }
    $('body').on('click', '#submit', function () {
        var startTime = new Date($('#starttime').val()).getTime()/1000;
        var endTime = new Date($('#endtime').val()).getTime()/1000;
        var carID = localStorage.getItem('vhcle');
        $.ajax({
            url: '/maintain/gettrace',
            type: 'POST',
            data: {
                start: startTime,
                end: endTime,
                vhcle: carID
            },
            xhrFields:{
                withCredentials:true
            },
            success: function (data) {
                if (data.state) {
                    var datas = data.data.list;
                    setTimeout(track({
                        start: datas[1],
                        end: datas[0]
                    }), 1000)
                } else {
                    TOAST.wran(data.errormsg, ' ', 1);
                }
            },
            error: function () {
                TOAST.wran('网络错误', ' ', 1)
            }
        })
    });

</script>



<script>
    function track(obj) {
        var map = new BMap.Map('Bmap');
        map.enableScrollWheelZoom();
        map.centerAndZoom(new BMap.Point(obj.start[1], obj.start[2]), 16);
        var startAddr = obj.start.province;
        var _start = new BMap.Point(obj.start[1],obj.start[2]);
        var _end = new BMap.Point(obj.end[1], obj.end[2])
        // 实例化一个驾车导航用来生成路线
        var drv = new BMap.DrivingRoute('北京', {
            onSearchComplete: function(res) {
                if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                    var arrPois = res.getPlan(0).getRoute(0).getPath();
                    map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
                    map.setViewport(arrPois);

                    lushu = new BMapLib.LuShu(map,arrPois,{
                        defaultContent:"",//"从天安门到百度大厦"
                        autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                        icon  : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
                        speed: 4500,
                        enableRotation:true,//是否设置marker随着道路的走向进行旋转
                        landmarkPois: []});
                }
            }
        });

        drv.search(_start,_end)
        //绑定事件
        $("run").onclick = function(){
            lushu.start();
        }
        $("stop").onclick = function(){
            lushu.stop();
        }
        $("pause").onclick = function(){
            lushu.pause();
        }
        $("hide").onclick = function(){
            lushu.hideInfoWindow();
        }
        $("show").onclick = function(){
            lushu.showInfoWindow();
        }
        function $(element){
            return document.getElementById(element);
        }
    }
    $('#mileage').html(localStorage.mileage);
    $('#fuelConsumption').html(localStorage.fuelConsumption);
    $('#lp100km').html(localStorage.lp100km);
</script>

<!-- <script>
    function testMap(obj) {
        var map = new BMap.Map("Bmap");
        map.centerAndZoom(new BMap.Point(obj.start[1], obj.start[2]), 15);

        var myP1 = new BMap.Point(obj.start[1], obj.start[2]);    //起点
        var myP2 = new BMap.Point(obj.end[1], obj.end[2]);    //终点
        var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(32, 70), {    //小车图片
            //offset: new BMap.Size(0, -5),    //相当于CSS精灵
            imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
        });
        var driving2 = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });    //驾车实例
        driving2.search(myP1, myP2);    //显示一条公交线路

        window.run = function () {
            var driving = new BMap.DrivingRoute(map);    //驾车实例
            driving.search(myP1, myP2);
            driving.setSearchCompleteCallback(function () {
                var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                var paths = pts.length;    //获得有几个点

                var carMk = new BMap.Marker(pts[0], { icon: myIcon });
                map.addOverlay(carMk);
                i = 0;
                function resetMkPoint(i) {
                    carMk.setPosition(pts[i]);
                    if (i < paths) {
                        setTimeout(function () {
                            i++;
                            resetMkPoint(i);
                        }, 100);
                    }
                }
                setTimeout(function () {
                    resetMkPoint(5);
                }, 100)

            });
        }
        setTimeout(function () {
            run();
        }, 1500);
    }
</script> -->